<template>
  <div v-if="errorMessage" class="error-message">
    <p>错误: {{ errorMessage }}</p>
  </div>
  <div v-if="successMessage" class="success-message">
    <p>{{ successMessage }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  errorMessage: String,
  successMessage: String,
});
</script>

<style scoped>
.error-message, .success-message {
  padding: 15px 20px; /* More padding */
  border-radius: 8px; /* More rounded */
  margin-bottom: 25px; /* More margin */
  text-align: center;
  font-weight: 500; /* Slightly bolder text */
  font-size: 1.05em; /* Slightly larger font */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}
.error-message {
  color: #dc3545; /* Bootstrap danger red */
  background-color: #f8d7da; /* Lighter red background */
  border: 1px solid #f5c6cb; /* Red border */
}
.success-message {
  color: #28a745; /* Bootstrap success green */
  background-color: #d4edda; /* Lighter green background */
  border: 1px solid #c3e6cb; /* Green border */
}
</style>
